<template>
  <div id="container">
    <div style="text-align:center;">
      <h3>课表添加</h3>
    </div>
    <hr />
    <div id="curriculum_ruleForm" style="margin:auto;text-align:center;width:80%">
      <el-form
        :model="curriculum_ruleForm"
        status-icon
        :rules="rules"
        ref="curriculum_ruleForm"
        inline-message
        class="demo-ruleForm"
      >
        <el-form-item prop="semester">
          <span class="title">学期：</span>
          <el-button type="text" @click.native="openSemesterList = true">
            <span v-if="curriculum_ruleForm.semester">{{curriculum_ruleForm.semester.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="institute">
          <span class="title">开课学院：</span>
          <el-button type="text" @click.native="openInstituteList = true">
            <span v-if="curriculum_ruleForm.institute">{{curriculum_ruleForm.institute.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="course">
          <span class="title">课程：</span>
          <el-button type="text" @click.native="openCourseList = true">
            <span v-if="curriculum_ruleForm.course">{{curriculum_ruleForm.course.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="class">
          <span class="title">教学班级：</span>
          <el-button @click="openClassList = true" type="text">
            <span v-if="curriculum_ruleForm.class">{{curriculum_ruleForm.class.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="teacher">
          <span class="title">授课教师：</span>
          <el-button @click="openTeacherList = true" type="text">
            <span v-if="curriculum_ruleForm.teacher">{{curriculum_ruleForm.teacher.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="arrangeNumber">
          <span class="title">排课人数：</span>
          <el-input
            v-model.number="curriculum_ruleForm.arrangeNumber"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="attendanceNumber">
          <span class="title">上课人数：</span>
          <el-input
            v-model.number="curriculum_ruleForm.attendanceNumber"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="classPeriod">
          <span class="title">课时：</span>
          <el-input
            v-model.number="curriculum_ruleForm.classPeriod"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <!-- 上课时间地点 -->
        <el-form-item prop="timePlace" style="height:auto;">
          <el-button type="text" @click.native="openTimePlaceList = true">
            <div
              v-if="curriculum_ruleForm.timePlace.week!=''||curriculum_ruleForm.timePlace.place!=''||curriculum_ruleForm.timePlace.sectionTime!=''"
            >
              <div style="height:50px;line-height: 50px;">
                <span class="title" style="width:150px;text-align:right;color:black;">上课星期：</span>
                <span>{{ curriculum_ruleForm.timePlace.week }}</span>
              </div>
              <div style="height:50px;line-height: 50px;">
                <span class="title" style="width:150px;text-align:right;color:black;">授课地点：</span>
                <span>{{curriculum_ruleForm.timePlace.place}}</span>
              </div>
              <div style="height:50px;line-height: 50px;width:450px;">
                <span class="title" style="width:150px;text-align:right;color:black">上课节次：</span>
                <span>
                  <!-- 这个kk自定义标签是因为使用其他标签难以实现对齐，采取这种方式对齐 -->
                  <kk
                    v-for="(section,index) in curriculum_ruleForm.timePlace.sectionTime"
                    :key="'section'+index"
                  >{{section.sectionTime}}、</kk>
                </span>
              </div>
              <div style="height:50px;line-height: 50px;">
                <span class="title" style="width:150px;text-align:right;color:black;">上课内容描述：</span>
                <span>{{curriculum_ruleForm.timePlace.sectionDescription}}</span>
              </div>
            </div>
            <div v-else>
              <span style="width: 150px;font-size: 20px;text-align:right;color:black;">上课时间地点：</span>
              <span>未选择</span>
            </div>
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="width:80%;text-align:center;">
            <el-button type="primary" @click="submitForm('curriculum_ruleForm')">提交</el-button>
            <el-button type="primary" @click="resetForm('curriculum_ruleForm')">重置</el-button>
          </span>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 学期筛选 -->
      <el-dialog title="选择学期" :visible.sync="openSemesterList">
        <el-input placeholder="请输入关键字" v-model="semesterKeyword">
          <template slot="prepend">学期名</template>
          <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="semesterSelect">
          <el-radio
            v-for="(semester, index) in semesterList"
            :key="'semester' + index"
            :label="semester"
            style="margin:10px;"
          >{{ semester.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (curriculum_ruleForm.semester = ''), (semesterSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="semesterSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 班级筛选 -->
      <el-dialog title="选择班级" :visible.sync="openClassList">
        <el-input placeholder="请输入关键字" v-model="classKeyword">
          <template slot="prepend">班级名</template>
          <el-button slot="append" icon="el-icon-search" @click="getClassByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="classSelect">
          <el-radio
            v-for="(classItem, index) in classList"
            :key="'class' + index"
            :label="classItem"
            style="margin:10px;"
          >{{ classItem.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (curriculum_ruleForm.className = ''), (classSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="classSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 课程筛选 -->
      <el-dialog title="选择课程" :visible.sync="openCourseList">
        <el-input placeholder="请输入关键字" v-model="courseKeyword">
          <template slot="prepend">课程名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="courseSelect">
          <el-radio
            v-for="(course, index) in courseList"
            :key="'course' + index"
            :label="course"
            style="margin:10px;"
          >{{ course.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (curriculum_ruleForm.courseName = ''), (courseSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="courseSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 教师筛选 -->
      <el-dialog title="选择教师" :visible.sync="openTeacherList">
        <el-input placeholder="请输入关键字" v-model="teacherKeyword">
          <template slot="prepend">教师</template>
          <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="teacherSelect">
          <el-radio
            v-for="(teacher, index) in teacherList"
            :key="'teacher' + index"
            :label="teacher"
            style="margin:10px;"
          >{{ teacher.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (curriculum_ruleForm.teacher = ''), (teacherSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="teacherSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 学院筛选 -->
      <el-dialog title="选择学院" :visible.sync="openInstituteList">
        <el-input placeholder="请输入关键字" v-model="instituteKeyword">
          <template slot="prepend">学院</template>
          <el-button slot="append" icon="el-icon-search" @click="getInstituteByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="instituteSelect">
          <el-radio
            v-for="(institute, index) in instituteList"
            :key="'institute' + index"
            :label="institute"
            style="margin:10px;"
          >{{ institute.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (curriculum_ruleForm.institute = ''), (instituteSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="instituteSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 上课时间地点 -->
      <el-dialog title="上课时间地点" :visible.sync="openTimePlaceList">
        <add @lessTimePlace="lessTimePlace" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAllSemester } from "@/api/semester";
import { getAllInstructionClass } from "@/api/instructionClass";
import { getAllCourse } from "@/api/course";
import add from "@/views/education-instructionalMatters/curriculum/components/lessonTimePlaceAdd";

export default {
  name: "teachingIntention_add",
  data() {
    // 表单验证规则
    var checkArangeNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("排课人数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkAttendanceNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("上课人数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 0) {
            callback(new Error("不能为负数"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkClassPeriod = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("课时不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于0"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkTimePlace = (rule, value, callback) => {
      if (!value.week) {
        return callback(new Error("请选择上课时间星期"));
      } else if (!value.sectionTime) {
        return callback(new Error("请选择上课节次"));
      } else if (!value.place) {
        return callback(new Error("请选择上课地点"));
      } else {
        callback();
      }
    };
    return {
      semesterKeyword: "", //学期筛选关键词
      openSemesterList: false, //学期筛选对话框显示
      semesterList: [], //学期选择列表
      semesterSelect: "", //选择的学期

      classKeyword: "", //班级筛选关键词
      openClassList: false, //班级筛选对话框显示
      classList: [], //班级选择列表
      classSelect: "", //选择的班级

      courseKeyword: "", //课程筛选关键词
      openCourseList: false, //课程筛选对话框显示
      courseList: [], //课程选择列表
      courseSelect: "", //选择的课程

      openTeacherList: false, //教师筛选对话框显示
      teacherKeyword: "", //教师筛选关键词
      teacherSelect: "", //选择的教师
      teacherList: [], //教师列表

      openInstituteList: false, //学院
      instituteKeyword: "", //学院筛选关键词
      instituteList: [], //学院选择列表
      instituteSelect: "", //选择的学院

      openTimePlaceList: false, //上课时间地点

      //表单数据
      curriculum_ruleForm: {
        teacher: "", //授课教师
        semester: "", //学期
        class: "", //班级
        course: "", //课程
        institute: "", //学院
        arrangeNumber: 0, //排课人数
        attendanceNumber: 0, //上课人数
        classPeriod: 0, //课时
        timePlace: {
          week: "", //上课星期
          sectionTime: "", //上课节次
          place: "", //上课地点
          sectionDescription: "", //上课描述
        }, //上课时间地点
        description: "", //课程描述
      },
      rules: {
        institute: [
          { required: true, message: "请选择开课学院", trigger: "submit" },
        ],
        teacher: [
          { required: true, message: "请选择授课教师", trigger: "submit" },
        ],
        semester: [
          { required: true, message: "请选择学期", trigger: "submit" },
        ],
        class: [
          { required: true, message: "请选择班级名称", trigger: "submit" },
        ],
        course: [
          { required: true, message: "请选择课程名称", trigger: "submit" },
        ],
        description: [
          { required: true, message: "请输入课程描述", trigger: "submit" },
        ],
        arrangeNumber: [{ validator: checkArangeNumber, trigger: "blur" }],
        attendanceNumber: [
          { validator: checkAttendanceNumber, trigger: "blur" },
        ],
        classPeriod: [{ validator: checkClassPeriod, trigger: "blur" }],
        timePlace: [{ validator: checkTimePlace, trigger: "submit" }],
      },
    };
  },
  components: {
    add,
  },
  created() {
    // 获取学期列表
    this.getAllSemester();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
    //获取学院列表
    this.getAllInstitute();
    //获取教师列表
    this.getAllTeacher();
  },
  methods: {
    //确定选择学期，获取选择数据，关闭对话框
    semesterSelected() {
      if (this.semesterSelect) {
        this.curriculum_ruleForm.semester = this.semesterSelect;
      }
      this.openSemesterList = false;
    },

    //确定选择班级，获取数据，关闭对话框
    classSelected() {
      if (this.classSelect) {
        this.curriculum_ruleForm.class = this.classSelect;
      }
      this.openClassList = false;
    },

    //确定选择课程，获取数据，关闭对话框
    courseSelected() {
      if (this.courseSelect) {
        this.curriculum_ruleForm.course = this.courseSelect;
      }
      this.openCourseList = false;
    },

    //确定教师
    teacherSelected() {
      if (this.teacherSelect) {
        this.curriculum_ruleForm.teacher = this.teacherSelect;
      }
      this.openTeacherList = false;
    },

    //确定学院
    instituteSelected() {
      if (this.instituteSelect) {
        this.curriculum_ruleForm.institute = this.instituteSelect;
      }
      this.openInstituteList = false;
    },

    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索班级
    getClassByKeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    //根据关键词搜索教师
    getTeacherByKeyword() {},

    //根据关键词搜索学院
    getInstituteByKeyword() {},

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then((res) => {
        this.semesterList = res.data.semesterList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then((res) => {
        this.courseList = res.data.courseList;
      });
    },

    //获取班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then((res) => {
        this.classList = res.data.instructionClassList;
      });
    },

    //获取学院列表
    getAllInstitute() {
      this.instituteList = [
        { id: "01", name: "计算机科学与技术学院、大数据学院" },
        { id: "02", name: "数学院" },
        { id: "03", name: "文学院" },
        { id: "04", name: "外国语学院" },
        { id: "05", name: "食品与安全学院" },
      ];
    },

    //获取教师列表
    getAllTeacher() {
      this.teacherList = [
        { id: "01", name: "张三" },
        { id: "02", name: "李四" },
        { id: "03", name: "廖森" },
        { id: "04", name: "志键" },
        { id: "05", name: "陆昊" },
      ];
    },

    //教师授课意向表表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**============接收子组件数据============================================== */
    //添加课程的时间地点组件传回来的数据
    lessTimePlace(val, val2) {
      this.openTimePlaceList = val;
      this.curriculum_ruleForm.timePlace = val2;
      console.log(val2.sectionTime);
    },
  },
};
</script>
<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
.el-form-item {
  height: 50px;
  line-height: 50px;
}
.title {
  display: inline-block;
  width: 150px;
  font-size: 20px;
  text-align: right;
}
.el-button span {
  display: inline-block;
  font-size: 20px;
  width: 300px;
  text-align: left;
}
</style>

